<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 100px;
            height: 2000px;
            background: red;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <button>点击我设置卷去的高度</button>
    <script>
        // 滚动事件；
        window.onscroll = function(){
            // console.log("滚了");
            // 获取滚动条的卷去高度；
        //   console.log(  document.documentElement.scrollTop);
        console.log(document.body.scrollTop);
        }


       var btn =  document.querySelector("button");

        // document.documentElement.scrollTop 1.获取卷去的高度； 2.设置卷去的高度；
        btn.onclick = function(){
            // document.documentElement.scrollTop = 0;
            document.body.scrollTop = 0;
        }

        // 注意 ：在chrome浏览器下 ：如果有文档声明 通过 document.documentElement.scrollTop 设置或者获取卷去的高度；
                                // 如果没有文档声明 通过 document.body.scrollTop 来设置或者获取卷去的高度

        /* 
            ie底下 ： 没有文档声明  那么 document.documentElement.scrollTop和document.body.scrollTop 都可以设置或者获取
                    有文档声明：document.documentElement.scrollTop可以获取或者设置 document.body.scrollTop不能获取或者设置；
        
        */
    </script>
</body>
</html>